<template>
    <el-card class="table-card">
        <div slot="header" class="clearfix">
            <!--工具条-->
            <el-form :inline="true" :model="filters" class="filter-form-box">
                <el-form-item>
                    <el-select size="small" v-model="filters.classIndex" placeholder="请选择班级" @input="filterClassChange">
                        <el-option
                                v-for="(item, index) in classList"
                                :key="index"
                                :label="item.classYear+'级 '+item.className"
                                :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="classList.length > 0">
                    <el-select size="small" :disabled="classList.length <= 1" v-model="filters.courseIndex" placeholder="请选择班级" @input="searchData">
                        <el-option
                                v-for="(item, index) in classList[filters.classIndex].courseList"
                                :key="index"
                                :label="item.courseName"
                                :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input size="small" v-model="filters.content" class="input-with-select" placeholder="请输入你要查询的内容">
                        <el-select v-model="filters.select" slot="prepend" placeholder="请选择" style="width: 75px;">
                            <el-option label="学号" value="1"></el-option>
                            <el-option label="名称" value="2"></el-option>
                        </el-select>
                    </el-input>
                </el-form-item>
                <el-form-item style="margin-right: 0;">
                    <el-button size="mini" v-on:click="isShowAdvancedSearch=!isShowAdvancedSearch" title="高级搜索">
                        <i class="el-icon-plus" v-show="!isShowAdvancedSearch"></i>
                        <i class="el-icon-minus" v-show="isShowAdvancedSearch"></i>
                    </el-button>
                </el-form-item>
                <el-form-item style="margin-right: 0;">
                    <el-button size="mini" v-on:click="refreshFilters" title="重置"><i class="el-icon-refresh"></i></el-button>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" v-on:click="searchData" title="搜索"><i class="el-icon-search"></i></el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--列表-->
        <el-table stripe border :data="datas" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="studentSchoolNumber" label="学号" sortable>
            </el-table-column>
            <el-table-column prop="studentName" label="姓名" sortable>
            </el-table-column>
            <el-table-column prop="courseName" label="所修课程" sortable>
            </el-table-column>
            <el-table-column prop="late" label="迟到次数" sortable>
            </el-table-column>
            <el-table-column prop="attendence" label="缺勤次数" sortable>
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <el-button size="small" @click="lateAdd(scope.$index, scope.row)">迟到</el-button>
                    <el-button size="small" @click="attendanceAdd(scope.$index, scope.row)">缺勤</el-button>
                    <el-button size="small" @click="removeBtn(scope.$index, scope.row)">撤销</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
            <span style="text-align: center;display: block;font-size: 18px;color:#797979">请选择你要撤销的内容</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="removeLate">迟 到</el-button>
                <el-button type="primary" @click="removeAttendance">缺 勤</el-button>
            </span>
        </el-dialog>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
    </el-card>
</template>

<script>
  import {getRelevancyList, getStudentList, getStudentAttendanceList, saveStudentAttendanceData} from '../../api/api';

  export default {
    data() {
      return {
        filters: {
          select: '1',
          classIndex: 0,
          courseIndex: 0,
          content: '',
        },
        centerDialogVisible: false,
        isShowAdvancedSearch: false,

        userId: '',
        datas: [],
        classList: [],
        removeData:[],


        total: 0,
        page: 0,

        listLoading: false,
        sels: [],//列表选中列
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.page = val;
        this.getData(0,0);
      },

      filterClassChange(){
        this.filters.courseIndex = 0;
        this.getData(this.filters.classIndex,this.filters.courseIndex);
      },

      searchData(){
        this.getData(this.filters.classIndex,this.filters.courseIndex);
      },

      //重置搜索条件
      refreshFilters(){
        this.filters.select='1';
        this.filters.content= '';
        this.getData(this.filters.classIndex,this.filters.courseIndex);
      },

      //获取数据列表
      getData(val1,val2) {
        let para = {
          count: 10,
          pageNo: this.page,
          sortDirection: 'asc',
          sortField: ["studentSchoolNumber"],
          classId: '',
          courseId: '',
          teacherId: '',
          studentName: '',
          studentSchoolNumber: '',
          studentId: '',
        };
        para.classId = this.classList[val1].classId;

        para.courseId = this.classList[val1].courseList[val2].courseId;

        para.teacherId = this.userId;
        para.studentId = '';

        if(this.filters.select === '1'){
          para.studentSchoolNumber = this.filters.content;
        }else if(this.filters.select === '2'){
          para.studentName = this.filters.content;
        }

        this.listLoading = true;
        console.log(para);
        getStudentAttendanceList(para).then((res) => {
          console.log(res);
          this.total = res.data.data.totalPages;
          this.datas = res.data.data.content;
          this.listLoading = false;
        });
      },

      //获取数据列表
      getRelevancyData(val1,val2,val3) {
        console.log(val1+'\n'+val2+'\n'+val3);
        let para = {
          count: 10,
          pageNo: 0,
          sortDirection: 'asc',
          sortField: ["name"],
          departmentId: '',
          specialtyId: '',
          classId: '',
          courseId: '',
          year: val2,
          teacherId: val1,
          semester: val3,
        };

        getRelevancyList(para).then((res) => {
          console.log(res.data.data.content);
          let dataArr =  res.data.data.content;
          if(dataArr.length>0){
            for(let i=0; i < dataArr.length; i++){
              if(!this.classList.find(item => item.classId === dataArr[i]['classId'])){
                let courseList = [];
                for(let j=0; j < dataArr.length; j++){
                  if(dataArr[j]['classId'] === dataArr[i]['classId']){
                    courseList.push({
                      courseId: dataArr[j]['courseId'],
                      courseName: dataArr[j]['courseName'],
                    })
                  }
                }
                this.classList.push({
                  classId: dataArr[i]['classId'],
                  className: dataArr[i]['className'],
                  classYear: dataArr[i]['classYear'],
                  specialtyId: dataArr[i]['specialtyId'],
                  departmentId: dataArr[i]['departmentId'],
                  courseList: courseList
                });
              }
            }
            this.getData(0,0);
          }
        });
      },

      getStudentAttendanceData(val1,val2,val3,val4){
        let para = {
          count: 10,
          pageNo: this.page,
          sortDirection: 'asc',
          sortField: ["name"],
          classId: val1,
          courseId: val2,
          teacherId: val3,
          studentId: val4,
        };

        if(this.filters.select === '1'){
          para.schoolNumber = this.filters.content;
        }else if(this.filters.select === '2'){
          para.name = this.filters.content;
        }

        console.log(para);
        getStudentAttendanceList(para).then((res) => {
          console.log(res);
        });
      },

      lateAdd: function (index,row) {
        this.saveStudentAttendanceData(row,1)
      },

      attendanceAdd: function (index,row) {
        this.saveStudentAttendanceData(row,2)
      },

      removeBtn: function(index,row) {
        this.removeData = Object.assign({}, row);
        this.centerDialogVisible=true;
      },

      removeLate: function () {
        this.centerDialogVisible = false;
        this.saveStudentAttendanceData(this.removeData,3)
      },

      removeAttendance: function () {
        this.centerDialogVisible = false;
        this.saveStudentAttendanceData(this.removeData,4)
      },

      saveStudentAttendanceData(row, val){
        let jsonStr = Object.assign({}, row);
        if(val===1){
          jsonStr.late = parseInt(jsonStr.late) + 1;
        }else if(val===2){
          jsonStr.attendence = parseInt(jsonStr.attendence) + 1;
        }else if(val===3){
          if(parseInt(jsonStr.late)>0){
            jsonStr.late = parseInt(jsonStr.late) - 1;
          }
        }else if(val===4){
          if(parseInt(jsonStr.attendence)>0){
            jsonStr.attendence = parseInt(jsonStr.attendence) - 1;
          }
        }
        saveStudentAttendanceData(jsonStr).then((res) => {
          this.getData(this.filters.classIndex,this.filters.courseIndex);
        });
      },

      selsChange: function (sels) {
        this.sels = sels;
      },

    },
    mounted() {
      let newDate = new Date();
      let year = newDate.getFullYear();
      let val1 = year-1;
      let val2 = year+1;
      let schoolYear;
      let semester;
      let month = newDate.getMonth()+1;

      if(month >= 9){
        schoolYear = year+'-'+val2;
        semester = 1
      }else{
        schoolYear = val1+'-'+year;
        semester = 2
      }

      let user = sessionStorage.getItem('user');
      user = JSON.parse(user);

      this.userId = user.id;
      this.getRelevancyData(user.id,schoolYear,semester);
      // this.getDepartmentData();
    }
  }

</script>

<style scoped>

</style>